<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/axios.js"></script>
</head>
<body>
    <div id="app">
        <!--搜索开始区域-->
        车牌号:<el-input v-model="query.carno" placeholder="请输入车位编号" style="width: 200px"></el-input>

        <el-button type="primary" size="mini" @click="initData()">搜索</el-button>
        <!--搜索的结束-->
        <el-button type="primary" size="mini" @click="toAddPage()">入库</el-button>
        <el-button type="danger" size="mini" @click="delMany()">删除</el-button>

        <el-dialog :title="mode.title" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-input v-model="form.id" type="hidden" autocomplete="off"></el-input>
                <el-form-item label="车牌号" :label-width="formLabelWidth">
                    <el-input v-model="form.carno" @blur="findCarByCarno(form.carno)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="车主" :label-width="formLabelWidth">
                    <el-input v-model="form.owner" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否是月租车" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.ismonth">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择车位" :label-width="formLabelWidth">
                    <el-select v-model="form.rid" placeholder="请选择">
                        <el-option
                                v-for="item in parkList"
                                :key="item.id"
                                :label="item.no"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
            </div>
        </el-dialog>
        <el-table
                :data="pageInfo.list"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="carno"
                    label="车牌号">
            </el-table-column>
            <el-table-column
                    prop="owner"
                    label="车主">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号">
            </el-table-column>

            <el-table-column
                    prop="ismonth"
                    label="是否是月租车">
                <template slot-scope="scope">
                    {{scope.row.ismonth==1?'是':'否'}}
                </template>
            </el-table-column>

            <el-table-column
                    prop="no"
                    label="占用车位">
            </el-table-column>
            <el-table-column
                    prop="startdate"
                    label="计费开始时间">
                <template slot-scope="scope">
                    {{
                    new Date(scope.row.startdate).getFullYear()
                    +"-"+(new Date(scope.row.startdate).getMonth()+1)
                    +"-"+new Date(scope.row.startdate).getDate()
                    +" "+new Date(scope.row.startdate).getHours()
                    +":"+new Date(scope.row.startdate).getMinutes()
                    +":"+new Date(scope.row.startdate).getSeconds()
                    }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="enddate"
                    label="计费结束时间">
                <template slot-scope="scope">
                    {{scope.row.enddate!=null?new Date(scope.row.enddate).getFullYear()
                    +"-"+(new Date(scope.row.enddate).getMonth()+1)
                    +"-"+new Date(scope.row.enddate).getDate()
                    +" "+new Date(scope.row.enddate).getHours()
                    +":"+new Date(scope.row.enddate).getMinutes()
                    +":"+new Date(scope.row.enddate).getSeconds():''
                    }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="money"
                    label="费用">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope" v-if="scope.row.money==null">
                    <el-button
                            size="mini" type="danger"
                            @click="handleEdit(scope.row.id)">立即出库</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum"
                :page-sizes="[2, 200, 300, 400]"
                :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
        </el-pagination>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            parkList:[],
          idArr:[],
          multipleSelection:[],
          //hobbyArr:[],
          mode:{
            title:"",
            url:""
          },
          formLabelWidth:"200px",
          //准备向后台提交的表单对象
          form:{
              carno:"",
              owner:"",
              phone:"",
              ismonth:"",
              rid:"",
              startdate:"",
              enddate:"",
              money:""
          },
          dialogFormVisible:false,//决定着弹窗是否弹起,true表示弹起,false表示不弹出
          pageInfo:{},
            //查询对象
          query:{
              pageNum:1,
              pageSize:2,
              carno:"",
          }

        },
        methods:{
            findCarByCarno(carno){
                this.form.carno=carno;
                axios.post(`/car/findCarByCarnoEq.do`,this.form).then(res=>{
                   debugger;
                    //是月租车
                    if (res.data.code!=0){
                        this.$message.error(res.data.msg);
                        this.form.carno="";
                    }else{
                        if (res.data.data!=null){
                            this.form=res.data.data;
                            this.form.ismonth=1;
                        }else{
                            //显示赋值
                            this.$set(this.form,"ismonth",2)
                        }
                    }
                })
            },
            //批删
            delMany(){
                //一个都没选
                if (this.idArr.length<1){
                    this.$message({
                        message: "请至少选中一条",
                        type: 'error'
                    });
                }else{
                    this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //点击确定
                        axios.post(`/room/delMany.do?idArr=${this.idArr}`).then(res=>{
                            if(res.data.code==0){
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.dialogFormVisible=false;
                                this.initData();
                            }else{
                                this.$message({
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }

                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },
            //选中
            handleSelectionChange(val) {
                //先清空
                this.idArr=[];
                //将选中的数据存入数组(包含所有name...)
                this.multipleSelection = val;
                //只获取所有的id并存入idArr数组
                for (let i = 0; i <this.multipleSelection.length ; i++) {
                    this.idArr.push(this.multipleSelection[i].id)
                }
            },
            handleEdit(id){
                axios.post("/inoroutcar/chuku.do?id="+id).then(res=>{
                    if(res.data.code==0){
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.dialogFormVisible=false;
                        this.initData();
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }

                })

            },
            saveOrUpdate(){
                //将数组转换为字符串
                //this.form.hobby=this.hobbyArr.join(",");//[吃,乐] “吃,乐”
                //去添加或修改
                axios.post(this.mode.url,this.form).then(res=>{
                   if(res.data.code==0){
                       this.$message({
                           message: res.data.msg,
                           type: 'success'
                       });
                       this.dialogFormVisible=false;
                       this.initData();
                       this.initSelectVal();
                   }else{
                       this.$message({
                           message: res.data.msg,
                           type: 'error'
                       });
                   }

                })
            },
            toAddPage(){
                //清空表单
                this.form={};
                //修改标题和请求路径
                this.mode.title="入库";
                this.mode.url="/inoroutcar/addInoroutcar.do";
                //弹窗弹出
                this.dialogFormVisible=true;
            },
            //当每页最多展示条数改变的时候会执行该方法 参数为页最多展示条数
            handleSizeChange(val) {
                this.query.pageSize=val;
                //重新查询
                this.initData();
            },
            //当页码改变的时候会执行该方法 参数为页码数
            handleCurrentChange(val) {
                //将新的当前页赋值
                this.query.pageNum=val;
                //重新查询
                this.initData();
            },
            initData(){
                axios.post(`/inoroutcar/findInoroutcarList.do?pageNum=${this.query.pageNum}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.pageInfo=res.data;
                })
            },
            initSelectVal(){
                axios.post(`/park/findParkListByState.do?state=1&used=2`).then(res=>{
                    this.parkList=res.data;
                })
            }
        },
        created(){
            this.initData();
            this.initSelectVal();
        }
    })
</script>
</html>